<template>
	<el-container class="login-container">
		<el-main>
			<el-form ref="formData" :model="formData" :rules="rules" label-width="180px" label-position="top"
			         :hide-required-asterisk="true">
				<el-form-item style="text-align: center;margin: 0;">
					<img src="@/assets/logo.png" height="60px" width="60px"/>
				</el-form-item>
				<el-form-item label="邮箱" prop="name">
					<el-input v-model.trim="formData.name"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input v-model.trim="formData.password" type="password"></el-input>
				</el-form-item>
				<el-form-item style="text-align: center; margin-top: 1px; margin-bottom: 10px;">
					<el-button type="primary" style="width: 100%;" @click="submitForm('formData')">登 录</el-button>
				</el-form-item>
				<el-form-item style="text-align: end; margin-bottom: 0;">
					<router-link to="register">去注册</router-link>
				</el-form-item>
			</el-form>
		</el-main>
	</el-container>
</template>

<script>
	export default {
		name: 'login',
		data() {
			return {
				formData: {
					name: "",
					password: ""
				},
				rules: {
					name: [
						{required: true, message: '请输入邮箱地址', trigger: 'blur'}
					],
					password: [
						{required: true, message: '请输入密码', trigger: 'blur'}
					]
				}
			};
		}, methods: {
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.api.user.login(this.formData).then(result => {
							result = result.data;
							if (result.code === 200) {
								localStorage.setItem("current_user", result.data);
								this.$router.push("/home/basicInfo/currencyInfo");
							} else {
								this.$message({message: result.data, type: "warning"});
							}
						});
					} else {
						this.$refs[formName].resetFields();
						return false;
					}
				});
			}
		}
	}
</script>

<style scoped>
	.el-form {
		width: 400px;
		margin: 10% auto 0;
		padding: 20px;
		border: 1px solid #ebebeb;
	}
</style>